<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>管理员</title>
    <link rel="icon" type="image/x-icon" href="https://static.platform.jwzhu.com/image/icon.ico">

    <link rel="stylesheet" href="https://static.platform.jwzhu.com/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://static.platform.jwzhu.com/css/common.css">
    <link rel="stylesheet" href="https://static.platform.jwzhu.com/css/form.css">
    <link rel="stylesheet" href="https://static.platform.jwzhu.com/css/table.css">
    <link rel="stylesheet" href="https://static.platform.jwzhu.com/css/dialog.css">
    <style>
        .role {
            padding: 0.5rem 2rem;
            border-top: 1px solid #757575;
            border-bottom: 1px solid #757575;
            margin-bottom: -1px;
            display: flex;
        }

        .role-name {
            pointer-events: none;
        }
    </style>
</head>
<body>
<form id="form_admin_query" class="form margin-top-1 form-inline">
    <div class="form-row">
        <div class="form-input-group">
            <label class="form-label">关键字：</label>
            <input name="key" class="form-input">
        </div>
        <div class="form-input-group margin-left-1">
            <button type="button" onclick="(()=>tableAdmin.reload())()">查询</button>
            <button type="reset" class="margin-left-1">重置</button>
        </div>
    </div>
</form>
<div id="table_admin">
</div>
<div id="dialog_admin" class="dialog">
    <div class="dialog-body">
        <form id="form_admin" class="form dialog-content">
            <input type="hidden" name="id">
            <div class="form-row" data-show="|Add|">
                <div class="form-input-group flex-1">
                    <label class="form-label">用户名：</label>
                    <input type="text" name="username" class="form-input" data-readonly="|Edit|">
                </div>
            </div>
            <div class="form-row" data-show="|Add|">
                <div class="form-input-group flex-1">
                    <label class="form-label">类型：</label>
                    <select id="form_admin_adminType" name="adminType" class="form-input" data-readonly></select>
                </div>
            </div>
            <div class="form-row" data-show="|Edit|">
                <div class="form-input-group flex-1">
                    <label class="form-label">类型：</label>
                    <input type="text" name="adminTypeText" class="form-input" data-readonly="|Add|Edit|">
                </div>
            </div>
            <div class="form-row" data-show="|Add|Edit|">
                <div class="form-input-group flex-1">
                    <label class="form-label">名称：</label>
                    <input type="text" name="nickname" class="form-input" data-readonly>
                </div>
            </div>
        </form>
    </div>
</div>
<div id="dialog_role" class="dialog">
    <input id="dialog_role_adminId" type="hidden">
    <div class="dialog-body">
        <div id="role" class="dialog-content">

        </div>
    </div>
</div>
</body>
<script src="https://static.platform.jwzhu.com/js/request.js"></script>
<script src="https://static.platform.jwzhu.com/js/form.js"></script>
<script src="https://static.platform.jwzhu.com/js/table.js"></script>
<script src="https://static.platform.jwzhu.com/js/dialog.js"></script>
<script src="https://static.platform.jwzhu.com/js/permission-filter.js"></script>
<script src="https://static.platform.jwzhu.com/js/common.js"></script>
<script type="text/javascript">
    window.onload = function () {
        document.getElementById('form_admin_adminType').initSelect('/admin/getAddAdminType');
    };

    let dialogAdmin = Dialog.create({
        dialogId: 'dialog_admin',
        bottomButtons: [{
            id: 'save',
            title: '保存',
            permission: 'permission.admin.updateById',
            classNames: 'float-right',
            closeAfterClick: true,
            onclick: function () {
                updateAdmin();
            }
        }, {
            id: 'submit',
            title: '提交',
            permission: 'permission.admin.add',
            classNames: 'float-right',
            closeAfterClick: true,
            onclick: function () {
                addAdmin();
            }
        }]
    });

    let dialogRole = Dialog.create({
        dialogId: 'dialog_role',
        title: '角色'
    });

    let tableAdmin = Table.init({
        tableDivId: 'table_admin',
        queryFormId: 'form_admin_query',
        url: '/admin/queryByParam',
        column: [
            {title: '名称', name: 'nickname'},
            {title: '类型', name: 'adminTypeText'},
            {title: '状态', name: 'adminStatusText'},
            {title: '添加时间', name: 'createTime'}],
        bottomButtons: [{
            id: 'add',
            title: '添加',
            permission: 'permission.admin.add',
            faClass: 'fa-plus',
            onclick: function () {
                addAdminView();
            }
        }],
        rowOperate: function () {
            let operates = [];
            operates.push({
                id: 'edit',
                title: '编辑',
                permission: 'permission.admin.updateById',
                onclick: updateAdminView
            });
            if (this.adminStatus === 1) {
                let id = this.id;
                operates.push({
                    id: 'disable',
                    title: '禁用',
                    permission: 'permission.admin.disable',
                    onclick: function () {
                        common.confirmRequest(id, '/admin/disable', 'table_admin', '是否确认禁用该管理员');
                    }
                });
            } else if (this.adminStatus === -1) {
                let id = this.id;
                operates.push({
                    id: 'enable',
                    title: '启用',
                    permission: 'permission.admin.enable',
                    onclick: function () {
                        common.confirmRequest(id, '/admin/enable', 'table_admin', '是否确认启用该管理员');
                    }
                }, {
                    id: 'delete',
                    title: '删除',
                    permission: 'permission.admin.delete',
                    onclick: function () {
                        common.confirmRequest(id, '/admin/delete', 'table_admin', '是否确认删除该管理员');
                    }
                });
            }
            if (this.adminType !== 1) {
                operates.push({
                    id: 'role',
                    title: '角色',
                    permission: 'permission.admin.getAdminRole',
                    onclick: roleView
                });
            }
            return operates;
        }
    });

    let addAdminView = function () {
        let _formHtml = document.getElementById('form_admin');
        _formHtml.reset();
        _formHtml.addReadOnly('Add');
        _formHtml.formShow('Add');
        let dialogTitle = '添加管理员';

        dialogAdmin.setTitle(dialogTitle).hideBottomButton().showBottomButton('submit').open();
    };

    let updateAdminView = function () {
        Request.get({
            url: '/admin/getById',
            params: {id: this.id},
            success: data => {
                let _formHtml = document.getElementById('form_admin');
                _formHtml.addReadOnly('Edit');
                _formHtml.formShow('Edit');
                _formHtml.setForm(data);
                dialogAdmin.setTitle('编辑管理员').hideBottomButton().showBottomButton('save').open();
            }
        });
    };

    let addAdmin = function () {
        let formData = document.getElementById('form_admin').getForm();
        Request.post({
            url: '/admin/add',
            params: formData,
            success: () => {
                tableAdmin.reload();
            }
        });
    };

    let updateAdmin = function () {
        let formData = document.getElementById('form_admin').getForm();
        Request.post({
            url: '/admin/updateById',
            params: formData,
            success: () => {
                tableAdmin.reload();
            }
        });
    };

    let roleView = function () {
        document.getElementById('dialog_role_adminId').setValue(this.id);
        Request.get({
            url: '/role/getAdminRole',
            params: {adminId: this.id},
            success: data => {
                let htmlString = '';
                data.forEach(function (item) {
                    htmlString += `<div>
                                        <div class="role">
                                            <span class="role-name">${item.name}</span>
                                            <input data-roleCode="${item.code}" type="checkbox" class="switch margin-auto margin-right-no" ${(item.have ? 'checked' : '')} onchange="roleChange()">
                                        </div>
                                    </div>`;
                });
                document.getElementById('role').innerHTML = htmlString;
                dialogRole.open();
            }
        });
    };

    let roleChange = function () {
        let $target = window.event.target;
        let adminId = document.getElementById('dialog_role_adminId').value;
        let roleCode = $target.getAttribute('data-roleCode');
        let url = '/admin/removeAdminRole';
        if ($target.checked) {
            url = '/admin/addAdminRole';
        }
        Request.post({
            url: url,
            params: {adminId: adminId, roleCode: roleCode},
            returnAll: true,
            showMessage: false,
            success: data => {
                if (data.code !== 1) {
                    $target.checked = !$target.checked;
                }
            }
        });
    };

</script>
</html>